import React from 'react';

// echart
// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';

import './scss/echartarea.scss';


export default class EchartPie extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let { dataTypes, yAxisData, seriesData } = this.props;
    this.sevenDayEchart(dataTypes, yAxisData, seriesData);
  }
  
  // 最近七天数据
  sevenDayEchart(dataTypes, yAxisData, seriesData) {
    let historyEchart = echarts.init(this.refs.echartTypeBars);
    let option = {
      title: {
        text: '处理总时长/h',
        top: 0,
        left: 'left',
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      color: ['#08B372', '#fa8c41', '#4280fe'],
      tooltip: {
        trigger: 'axis', backgroundColor: '#3d83fe', padding: [5, 10],
        formatter: "{a0}时长:&nbsp;&nbsp;&nbsp;&nbsp;{c0} h <br>{a1}时长:&nbsp;&nbsp;&nbsp;&nbsp;{c1} h <br>{a2}时长:&nbsp;&nbsp;&nbsp;&nbsp;{c2} h",
        axisPointer: {
          type: 'shadow',
          shadowStyle: { color: 'rgba(255, 255, 255, .08)' }
        }
      },
      grid: {
        left: 40, right: 40, top: 60, bottom: 30
      },
      legend: { right: 20, itemWidth: 14, itemHeight: 14, data: dataTypes, selectedMode: false},
      toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center' },
      calculable: true,
      xAxis: [{
        type: 'category',
        axisLine: { show: false },
        axisLabel: { textStyle: { color: '#7484cb' } },
        axisTick: {show: false},
        data: yAxisData
      }],
      yAxis: [{ 
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel : { textStyle: { color: '#7484cb' } },
        splitLine: { lineStyle: { color: '#212e5d' } }
      }],
      series: seriesData
    };
    historyEchart.setOption(option, true);
  }

  render() {
    return ( <div className="echart-type-area" ref="echartTypeBars"> </div> )
  }
}